<!--聚医云版本更新-->
<template>
    <div class="versions">
        <div class="chart" id="chart_left"></div>
    </div>
</template>

<script>
    export default {
        name: 'versions',
        mounted() {
            this.getEchartContent()
        },
        methods: {
            getEchartContent() {
                let myChart = this.$echarts.init(document.getElementById('chart_left'));
                let list = [
                    {
                        policy_country: '',
                        policy_time: '2021-01~06月',
                        policy_title: '聚医云系统模拟测试阶段',
                    },
                    {
                        policy_country: '5501启用',
                        policy_time: '2021-07月',
                        policy_title: '聚医云系统正式启用运行',
                    },
                    {
                        policy_country: ' ',
                        policy_time: '2021-08月',
                        policy_title: '修复自动同步科室、去重问题',
                    },
                    {
                        policy_country: 's60启用',
                        policy_time: '2021-09月',
                        policy_title: '解决数据超时上传问题',
                    },
                    {
                        policy_country: ' ',
                        policy_time: '2021-10月',
                        policy_title: '大屏优化、web端各类报表开发',
                    },
                    {
                        policy_country: 'HP120Pro手机启用',
                        policy_time: '2021-11月',
                        policy_title: '定制城投公司收运端及报表开发',
                    },
                    {
                        policy_country: '',
                        policy_time: '2021-12月',
                        policy_title: '开发多功能选择上传方式',
                    },
                ];
                let seriesList = [];
                var yarr = [];
                var linearr = [];
                var linev = { value: -0, symbol: 'none' };

                list.map((item, index) => {
                    seriesList.push({
                        date: item.policy_time,
                        title: item.policy_title,
                        country: item.policy_country,
                        value: 0,
                        label: {
                            show: true,
                            lineHeight: 20,
                            align: index % 2 == 0 ? 'left' : 'right',
                            padding: 20,
                            fontSize: 15,
                            position: index % 2 == 0 ? 'left' : 'right',
                            formatter: function (params) {
                                return `{bolder|${params.name}}\n${params.data.title}`;
                            },
                            rich: {
                                bolder: {
                                    fontWeight: 700,
                                    color: '#24C4FF',
                                    fontSize: 16,
                                },
                            },
                        },
                    });
                });
                seriesList.map((item, index) => {
                    linearr.push({
                        value: -0,
                    });
                    yarr.push(`${item.date}  ${item.country}`);
                });
                let option = {
                    grid: {
                        top: '10%',
                        left: '50%',
                        right: '5%',
                        bottom: '10%',
                    },
                    legend: {
                        bottom: 0,
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            padding: [2, 0, 0, 0],
                        },
                    },
                    xAxis: {
                        show: false,
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                        splitLine: { show: false },
                        min: 0,
                        max: 0,
                    },
                    yAxis: {
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 4,
                                color: '#24C4FF',
                            },
                        },

                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 40,
                            alignWithLabel: true,
                            show: false,
                        },
                        data: ['', ...yarr, ''],
                    },
                    color: ['#333'],
                    series: [
                        {
                            type: 'line',
                            symbolSize: 12,
                            itemStyle: {
                                color:'#fff',
                                borderColor:'#fff',
                                borderWidth: 2,
                            },

                            hoverAnimation: false,
                            legendHoverLink: false,
                            data: [linev, ...seriesList, linev],
                            lineStyle: {
                                color: '#24C4FF',
                            },
                        },
                    ],
                };
                myChart.setOption(option, true);
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },
    }
</script>

<style scoped lang="less">
    .versions {
        .chart {
            height: 8.5rem;
            width: 5.54rem;
            margin-top: -0.5rem;
            margin-bottom: -0.05rem;
        }
    }
</style>
